<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      #scrollBox {
          height: 200px;
          width: 400px;
          background: #999999;
          overflow: auto;
      }

      .box {
          height: 200px;
          width: 200px;
          border: 1px solid green;
      }
  </style>
</head>
<body>
<div id="scrollBox">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div id="targetBox" class="box"></div>
</div>
<script>
    window.onload = function () {
        const scrollBox = document.getElementById('scrollBox')
        const targetBox = document.getElementById('targetBox')

        window.observer = new IntersectionObserver(function () {}, {
            root: scrollBox,
            threshold: 0.5
        })

        observer.observe(targetBox)
        // takeRecords() 返回一个 IntersectionObserverEntry 对象数组, 每个对象的目标元素都包含每次相交的信息, 可以显式通过调用此方法或隐式地通过观察者的回调自动调用.
        // 如果使用回调来监视这些更改，则无需调用此方法。调用此方法会清除挂起的相交状态列表，因此不会运行回调。
        const takeRecords = observer.takeRecords()
        console.log('takeRecords', takeRecords)
    }
</script>
</body>
</html>
